<template>
  <div id="app">
    <ul class="flooat">
      <li class="lis"><router-link to="/"><dl calss="ss"><dt><img src="@/assets/elm1.png"></dt><dd>首页</dd></dl></router-link></li>
      <li class="lib"><router-link to="/floofax"><dl calss="ss"><dt><img src="@/assets/lem2.png"></dt><dd>发现</dd></dl></router-link></li>
      <li class="lia"><router-link to="/floodind"><dl calss="ss"><dt><img src="@/assets/elm3.png"></dt><dd>订单</dd></dl></router-link></li>
      <li class="lic"><router-link to="/floowode"><dl calss="ss"><dt><img src="@/assets/elm4.png"></dt><dd>我的</dd></dl></router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
.px2rem(@name, @px){
    @{name}:  @px / 75 * 1rem;
}
  .flooat{
    padding-left: 0;
    width:100%;
    display: flex;
    text-align: center;
    position: fixed;
    left: 0;
    bottom:0;
    .px2rem(height,100);
    border-top:1px solid #ccc;
    z-index:999;
    background:#fff;
    
  }
  .flooat li{
    flex: 1;
    display: flex;
    align-items:center;
    justify-content:center;
  }
  .flooat li img{
    .px2rem(height,38);
  }

.ss dd{
  margin:0;
}
</style>
